<template>
  <div class="login subchild" id="body">
       <van-icon class="goback" name="cross" color="rgb(157, 157, 157)" size="30px" @click="goto" />

    <van-form @submit="onSubmit" id="login" ref="form">
      <van-field
        v-model="register.phone"
        name="phone"
        label="手机号码"
        placeholder="手机号码"
        :rules="[
          { required: true, message: '请填写手机号码' },
          { validator: phoneVaildator, message: '请填写正确的手机号码' },
        ]"
      />
      <van-field
        v-model="register.usernames"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="register.password"
        :type="type_1"
        name="password"
        label="密码"
        placeholder="密码"
        :right-icon="type_1 == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="
          type_1 == 'password' ? (type_1 = 'text') : (type_1 = 'password')
        "
        :rules="[
          { required: true, message: '请填写密码' },
          { validator: checkPassEqual, message: '请填写正确的密码' },
        ]"
      />
      <van-field
        v-model="register.dbpass"
        type="password"
        name="dbpass"
        label="确认密码"
        placeholder="确认密码"
        :rules="[
          { required: true, message: '请填写确认密码' },
          { pattern: passReg, message: '请填写正确的密码' },
          { validator: checkPassEqual, message: '两次密码输入不一致' },
        ]"
      />
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit" class="regis">注册 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from "axios";

import { phoneReg, passReg } from "@/utils";

import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);

export default {
  data() {
    return {
      register: {},
      phoneReg,
      passReg,
      type_1: "password",
    };
  },
  methods: {
    goto(){
      this.$router.go(-1)
    },
    onSubmit(value) {
      console.log(this.register);
      axios
        .post("http://8.136.12.226:3000/users/register/zc", this.register)
        .then((res) => {
          console.log(res.data);
          if (res.data.type == 1) {
            Toast(res.data.msg);
            this.$router.push({ name: "login" });
          } else {
            Toast(res.data.msg);
          }
        });
    },
    phoneVaildator(val) {
      return phoneReg.test(val);
    },
    checkPassEqual(val) {
      return this.register.password == val;
    },
    checkDbPassword() {
      if (this.register.dbpass) {
        this.$refs.form.validate("dbpass");
      }
    },
  },
};
</script>

<style scoped>
#login {
  margin-top: 46px;
}

#body {
  background-color: #fff;
  height: 100% !important;
  width: 100%;
  background: url("../../assets/images/background.jpg");
  background-position: center center;
}
.regis{
  background-color:rgb(249, 78, 78);;
  border: none;
  border-radius: 10px;
}

.goback{
    position: absolute;
    top: 3%;
    right: 5%;
}

::v-deep .van-field {
  margin-top: 20px;
}
</style>

